<template>
  <div>
    <Echart
      :options="options"
      id="centreLeft1Chart"
      height="6rem"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data () {
    return {
      options: {},
      // 定义颜色
      colorList: {
        linearPtoR: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#FE2344"
            },
            {
              offset: 1,
              color: "#FF0000"
            }
          ]
        },
        linearYtoO: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#f5b44d"
            },
            {
              offset: 1,
              color: "#FF8000"
            }
          ]
        },
        linearGtoB: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#43dfa2"
            },
            {
              offset: 1,
              color: "#008000"
            }
          ]
        },
        linearBtoG: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#1c98e8"
            },
            {
              offset: 1,
              color: "#28f8de"
            }
          ]
        },
        areaBtoG: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(35,184,210,.2)"
            },
            {
              offset: 1,
              color: "rgba(35,184,210,0)"
            }
          ]
        }
      }
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = {
          title: {
            text: "",
            textStyle: {
              color: "#D3D6DD",
              fontSize: 20,
              fontWeight: "normal"
            },
            subtext: '2020-05-19',
            subtextStyle: {
              color: "#fff",
              fontSize: 16
            },
            top: -5,
            left: 0
          },
          legend: {
            top: 0,
            right: 0,
            orient: "vertical",
            itemGap: 2,
            itemWidth: 2,
            itemHeight: 12,
            data: ["全国新增确诊", "全国新增死亡", "预测新增确诊", "预测新增死亡"],
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          tooltip: {
            trigger: "item"
          },
          grid: {
            left: 90,
            right: 80,
            bottom: 40,
            top: "20%"
          },
          xAxis: {
            type: "category",
            position: "bottom",
            axisLine: true,
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12
            },
            data: newData.weekCategory
          },
          // 下方Y轴
          yAxis: {
            name: "人数",
            nameLocation: "end",
            nameGap: 24,
            nameTextStyle: {
              color: "rgba(255,255,255,.5)",
              fontSize: 14
            },
            max: newData.maxData,
            splitNumber: 4,

            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                opacity: 0.1
              }
            },
            axisLabel: {
              color: "rgba(255,255,255,.8)",
              fontSize: 12
            }
          },
          series: [
            {
              name: "全国新增确诊",
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: "#1c98e8"
                }
              },
              lineStyle: {
                normal: {
                  color: this.colorList.linearBtoG,
                  width: 3
                }
              },
              areaStyle: {
                normal: {
                  color: this.colorList.areaBtoG
                }
              },
              data: newData.weekLineData,
              lineSmooth: true,
              tooltip: {
                position: "top",
                formatter: "{b} 全国累计新增确诊 {c} 人",
                backgroundColor: "rgba(28,152,232,.2)",
                padding: 6
              }
            },
            {
              name: "全国新增死亡",
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 10,
              itemStyle: {
                normal: {
                  color: "#43dfa2"
                }
              },
              lineStyle: {
                normal: {
                  color: this.colorList.linearGtoB,
                  width: 3
                }
              },
              areaStyle: {
                normal: {
                  color: this.colorList.areaBtoG
                }
              },
              data: newData.weekLineData2,
              lineSmooth: true,
              tooltip: {
                position: "top",
                formatter: "{b} 全国累计新增死亡 {c} m",
                backgroundColor: "rgba(28,152,232,.2)",
                padding: 6
              }
            },
            {
              name: "预测新增确诊",
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#FF8000",
                  lineStyle:{
                    type:'dotted'  //'dotted'虚线 'solid'实线
                  }
                }
              },
              lineStyle: {
                normal: {
                  color: this.colorList.linearYtoO,
                  width: 3
                }
              },
              areaStyle: {
                normal: {
                  color: this.colorList.areaBtoG
                }
              },
              data: newData.weekLineData3,
              lineSmooth: true,
              tooltip: {
                position: "top",
                formatter: "预测 {b} 新增感染 {c} 人",
                backgroundColor: "rgba(28,152,232,.2)",
                padding: 6
              }
            },
            {
              name: "预测新增死亡",
              type: "line",
              smooth: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: "#FE2344",
                  lineStyle:{
                    type:'dotted'  //'dotted'虚线 'solid'实线
                  }
                }
              },
              lineStyle: {
                normal: {
                  color: this.colorList.linearPtoR,
                  width: 3
                }
              },
              areaStyle: {
                normal: {
                  color: this.colorList.areaBtoG
                }
              },
              data: newData.weekLineData4,
              lineSmooth: true,
              tooltip: {
                position: "top",
                formatter: "预测 {b} 新增死亡 {c} 人",
                backgroundColor: "rgba(28,152,232,.2)",
                padding: 6
              },

            },
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
};
</script>
